<template>
  <div>
    <el-form ref="refForm" :model="formData" :rules="rules" label-width="75px">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <span class="el_title"
              >基本设置<i class="header-icon el-icon-info"
            /></span>
          </template>

          <el-form-item label="流程主键" prop="id">
            <el-input v-model="formData.id" clearable />
          </el-form-item>
          <el-form-item label="流程名称" prop="name">
            <el-input v-model="formData.name" clearable />
          </el-form-item>

          <el-form-item label="流程描述">
            <el-input
              v-model="formData.documentation"
              :rows="3"
              type="textarea"
              clearable
            />
          </el-form-item>

          <el-form-item label="流程分类" prop="processCategory">
            <el-select v-model="formData.processCategory">
              <el-option
                v-for="item in this.processCategory"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="2">
          <template slot="title">
            <span class="el_title"
              >候选配置<i class="header-icon el-icon-info"
            /></span>
          </template>
          <el-form-item label="可发起者">
            <el-input v-model="formData.candidateStarterUsers" clearable />
          </el-form-item>
          <el-form-item label="可发起组">
            <el-input v-model="formData.candidateStarterGroups" clearable />
          </el-form-item>
        </el-collapse-item>

        <el-collapse-item name="3">
          <template slot="title">
            <span class="el_title"
              >监听器<i class="header-icon el-icon-info"
            /></span>
          </template>
          <el-form-item label="执行监听">
            <el-badge :value="executionListenerLength">
              <el-button @click="executionListenerDrawer = true"
                >编辑</el-button
              >
            </el-badge>
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>

    <listener
      title="执行监听"
      type="Execution"
      :element="element"
      :modeler="modeler"
      @changeListenerDrawer="changeExecutionListenerDrawer"
      @saveListener="saveExecutionListener"
      :listenerDrawer="executionListenerDrawer"
    ></listener>
  </div>
</template>

<script>
import mixinPanel from "../mixins/mixinPanel";
import listener from "../properties/listener";

export default {
  name: "BpmnProcess",
  components: { listener },
  mixins: [mixinPanel],
  props: {
    processCategory: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      activeName: "1",
      formData: {},
      rules: {
        id: [{ required: true, message: "该项不能为空", trigger: "change" }],
        name: [{ required: true, message: "该项不能为空", trigger: "change" }],
      },
      executionListenerDrawer: false,
      executionListenerLength: 0,
    };
  },
  watch: {
    "formData.processCategory": function (val) {
      if (val === "") {
        val = null;
      }
      this.element.businessObject.$parent.targetNamespace = val;
    },
    "formData.candidateStarterUsers": function (val) {
      this.updateProperty("candidateStarterUsers", val, true);
    },
    "formData.candidateStarterGroups": function (val) {
      this.updateProperty("candidateStarterGroups", val, true);
    },
  },
  created() {
    const data = {
      ...this.element.businessObject,
      ...this.element.businessObject.$attrs,
    };
    const targetNamespace = this.element.businessObject.$parent.targetNamespace;
    data.processCategory = targetNamespace;
    data.documentation = this.getDocumentation();

    this.formData = data;

    this.executionListenerLength =
      this.element.businessObject.extensionElements && this.element.businessObject.extensionElements.values.filter(
        (item) => item.$type === this.descriptorPrefix + "ExecutionListener"
      ).length || 0;
  },
  methods: {
    changeExecutionListenerDrawer(v) {
      this.executionListenerDrawer = v;
    },
    saveExecutionListener(v) {
      this.executionListenerLength = v;
    },
  },
};
</script>

<style lang="scss">
</style>